<div class="settings">
  <div class="settings-wrapper" [ngClass]="{ 'settings-wrapper-fadeout': fadeOutAnimation }">
    <div class="settings-container">
      <img src="assets/error.svg" class="settings__close" (click)="hideSettings()" />
      <div class="settings__content" #settingsMain>
        <span class="settings__heading">settings</span>
        <ul class="settings__list">
          <li (click)="changePage(1, 0, 'forward')">General <fa-icon [icon]="['fas', 'chevron-right']"></fa-icon></li>
          <li (click)="changePage(2, 0, 'forward')">OctoDash <fa-icon [icon]="['fas', 'chevron-right']"></fa-icon></li>
          <li (click)="changePage(3, 0, 'forward')">Plugins <fa-icon [icon]="['fas', 'chevron-right']"></fa-icon></li>
          <li (click)="changePage(4, 0, 'forward')">Credits <fa-icon [icon]="['fas', 'chevron-right']"></fa-icon></li>
        </ul>
        <span class="settings__save" (click)="updateConfig()">save</span>
        <span class="settings__made"
          >Made with <fa-icon [icon]="['fas', 'heart']" class="settings__made-heart"> </fa-icon> by
          /u/UnchartedBull</span
        >
        <span class="settings__version">OctoDash v{{ version }}</span>
      </div>
      <div class="settings__content settings__content-inactive" #settingsGeneral>
        <span class="settings__heading" (click)="changePage(0, 1, 'backward')">
          <fa-icon [icon]="['fas', 'chevron-left']" class="settings__heading-back"> </fa-icon>general
        </span>
        <div class="settings__scroll">
          <span class="settings__heading-2">OctoPrint Connection</span>
          <form class="settings__form">
            <label for="octoprintURLName" class="settings__input-label">Octoprint URL</label>
            <span class="settings__input-prefix">http://</span>
            <input
              type="text"
              id="octoprintURLName"
              class="settings__input"
              name="octoprintURLName"
              style="width: 23.2vw;"
              [(ngModel)]="this.config.octoprint.urlSplit.url"
              required
            />
            <span class="settings__input-divider">:</span>
            <input
              type="text"
              id="octoprintURLPort"
              class="settings__input"
              name="octoprintURLPort"
              style="width: 8vw;"
              [(ngModel)]="this.config.octoprint.urlSplit.port"
              required
            />
            <br />
            <label for="accessToken" class="settings__input-label">API Key</label>
            <input
              type="text"
              id="accessToken"
              class="settings__input"
              name="accessToken"
              style="width: 44.94vw;"
              [(ngModel)]="this.config.octoprint.accessToken"
              required
            />
          </form>
          <span class="settings__heading-2">Printer</span>
          <form class="settings__form">
            <label for="printerName" class="settings__input-label">Name</label>
            <input
              type="text"
              id="printerName"
              class="settings__input"
              name="printerName"
              style="width: 44.94vw;"
              [(ngModel)]="config.printer.name"
              required
            />
            <table>
              <tr>
                <td style="width: 25.6vw; display: block;">
                  <label for="xySpeed" class="settings__input-label">XY-Speed <span>(mm/s)</span></label>
                  <input
                    type="number"
                    id="xySpeed"
                    class="settings__input"
                    name="xySpeed"
                    style="width: 19vw;"
                    [(ngModel)]="config.printer.xySpeed"
                    required
                  />
                </td>
                <td>
                  <label for="zSpeed" class="settings__input-label">Z-Speed <span>(mm/s)</span></label>
                  <input
                    type="number"
                    id="zSpeed"
                    class="settings__input"
                    name="zSpeed"
                    style="width: 19vw;"
                    [(ngModel)]="config.printer.zSpeed"
                    required
                  />
                </td>
              </tr>
              <tr>
                <td colspan="2" class="settings__sub-heading">Default Temperatures & Fan Speed</td>
              </tr>
              <tr>
                <td style="width: 25.6vw; display: block;">
                  <label for="defaultHotendTemperature" class="settings__input-label">Hotend <span>(°C)</span></label>
                  <input
                    type="number"
                    id="defaultHotendTemperature"
                    class="settings__input"
                    name="defaultHotendTemperature"
                    style="width: 19vw;"
                    [(ngModel)]="config.printer.defaultTemperatureFanSpeed.hotend"
                    required
                  />
                </td>
                <td>
                  <label for="defaultHeatbedTemperature" class="settings__input-label">Heatbed <span>(°C)</span></label>
                  <input
                    type="number"
                    id="defaultHeatbedTemperature"
                    class="settings__input"
                    name="defaultHeatbedTemperature"
                    style="width: 19vw;"
                    [(ngModel)]="config.printer.defaultTemperatureFanSpeed.heatbed"
                    required
                  />
                </td>
              </tr>
              <tr>
                <td style="width: 25.6vw; display: block;">
                  <label for="defaultFanSpeed" class="settings__input-label">Fan Speed <span>(%)</span></label>
                  <input
                    type="number"
                    id="defaultFanSpeed"
                    class="settings__input"
                    name="defaultFanSpeed"
                    style="width: 19vw;"
                    [(ngModel)]="config.printer.defaultTemperatureFanSpeed.fan"
                    required
                  />
                </td>
              </tr>
            </table>
          </form>
          <span class="settings__heading-2">Filament</span>
          <form class="settings__form">
            <table>
              <tr>
                <td colspan="2" style="text-align: center;">
                  <div
                    class="settings__checkbox-container"
                    (click)="config.filament.useM600 = !config.filament.useM600"
                  >
                    <span class="settings__checkbox">
                      <span class="settings__checkbox-checked" *ngIf="config.filament.useM600"></span>
                    </span>
                    <span class="settings__checkbox-descriptor">Use M600 to change Filament</span>
                  </div>
                </td>
              </tr>
              <tr>
                <td style="width: 25.6vw; display: block;">
                  <label for="filament-feed-length" class="settings__input-label">Feed Length <span>(mm)</span></label>
                  <input
                    type="number"
                    id="filament-feed-length"
                    class="settings__input"
                    name="filament-feed-length"
                    style="width: 19vw;"
                    [(ngModel)]="config.filament.feedLength"
                    required
                    [disabled]="config.filament.useM600"
                  />
                </td>
                <td style="width: 25.6vw;">
                  <label for="filament-purge-distance" class="settings__input-label"
                    >Purge Distance <span>(mm)</span></label
                  >
                  <input
                    type="number"
                    id="filament-purge-distance"
                    class="settings__input"
                    name="filament-purge-distance"
                    style="width: 19vw;"
                    [(ngModel)]="config.filament.purgeDistance"
                    required
                    [disabled]="config.filament.useM600"
                  />
                </td>
              </tr>
              <tr>
                <td style="width: 25.6vw; display: block;">
                  <label for="filament-feed-speed" class="settings__input-label">Feed Speed <span>(mm/s)</span></label>
                  <input
                    type="number"
                    id="filament-feed-speed"
                    class="settings__input"
                    name="filament-feed-speed"
                    style="width: 19vw;"
                    [(ngModel)]="config.filament.feedSpeed"
                    required
                    [disabled]="config.filament.useM600"
                  />
                </td>
                <td>
                  <label for="filament-feed-speed-slow" class="settings__input-label"
                    >Feed Speed Slow <span>(mm/s)</span></label
                  >
                  <input
                    type="number"
                    id="filament-feed-speed-slow"
                    class="settings__input"
                    name="filament-feed-speed-slow"
                    style="width: 19vw;"
                    [(ngModel)]="config.filament.feedSpeedSlow"
                    required
                    [disabled]="config.filament.useM600"
                  />
                </td>
              </tr>
              <tr>
                <td style="width: 25.6vw; display: block;">
                  <label for="filament-thickness" class="settings__input-label">Thickness <span>(mm)</span></label>
                  <input
                    type="number"
                    id="filament-thickness"
                    class="settings__input"
                    name="filament-thickness"
                    style="width: 19vw;"
                    [(ngModel)]="config.filament.thickness"
                    required
                  />
                </td>
                <td>
                  <label for="filament-density" class="settings__input-label">Density <span>(g/cm³)</span></label>
                  <input
                    type="number"
                    id="filament-density"
                    class="settings__input"
                    name="filament-density"
                    style="width: 19vw;"
                    [(ngModel)]="config.filament.density"
                    required
                  />
                </td>
              </tr>
            </table>
            <div class="filament-feed-speed-info">
              Please set these values carefully, as they possibly can destroy parts of your printer, just don't set your
              Feed Speed to high and your Feed Length to long.
            </div>
          </form>
          <br />
        </div>
      </div>
      <div class="settings__content settings__content-inactive" #settingsOctoDash>
        <span class="settings__heading" (click)="changePage(0, 2, 'backward')">
          <fa-icon [icon]="['fas', 'chevron-left']" class="settings__heading-back"> </fa-icon>octodash
        </span>
        <div class="settings__scroll">
          <span class="settings__heading-2">General</span>
          <label for="api-polling-interval" class="settings__input-label"
            >Value Refresh Interval <span>(ms)</span></label
          >
          <input
            type="number"
            id="api-polling-interval"
            class="settings__input"
            name="api-polling-interval"
            style="width: 44.94vw;"
            [(ngModel)]="config.octodash.pollingInterval"
            required
          />
          <div
            class="settings__checkbox-container"
            (click)="config.octodash.touchscreen = !config.octodash.touchscreen"
          >
            <span class="settings__checkbox">
              <span class="settings__checkbox-checked" *ngIf="config.octodash.touchscreen"></span>
            </span>
            <span class="settings__checkbox-descriptor">Use Touchscreen</span>
          </div>
          <br />
          <div
            class="settings__checkbox-container"
            (click)="config.octodash.turnScreenOffWhileSleeping = !config.octodash.turnScreenOffWhileSleeping"
          >
            <span class="settings__checkbox">
              <span class="settings__checkbox-checked" *ngIf="config.octodash.turnScreenOffWhileSleeping"></span>
            </span>
            <span class="settings__checkbox-descriptor">Turn screen off while sleeping</span>
          </div>
          <br />
          <div
            class="settings__checkbox-container"
            (click)="config.octodash.preferPreviewWhilePrinting = !config.octodash.preferPreviewWhilePrinting"
          >
            <span class="settings__checkbox">
              <span class="settings__checkbox-checked" *ngIf="config.octodash.preferPreviewWhilePrinting"></span>
            </span>
            <span class="settings__checkbox-descriptor">Preview by default while printing</span>
          </div>
          <br />
          <span class="settings__heading-2">Files</span>
          <table class="settings__files">
            <tr>
              <td>
                <span style="font-size: 2.9vw;">sort by</span> <br />
                <div class="settings__checkbox-container" (click)="config.octodash.fileSorting.attribute = 'name'">
                  <span class="settings__checkbox">
                    <span
                      class="settings__checkbox-checked"
                      *ngIf="config.octodash.fileSorting.attribute === 'name'"
                    ></span>
                  </span>
                  <span class="settings__checkbox-descriptor">Name</span>
                </div>
                <br />
                <div class="settings__checkbox-container" (click)="config.octodash.fileSorting.attribute = 'date'">
                  <span class="settings__checkbox">
                    <span
                      class="settings__checkbox-checked"
                      *ngIf="config.octodash.fileSorting.attribute === 'date'"
                    ></span>
                  </span>
                  <span class="settings__checkbox-descriptor">Date</span>
                </div>
                <br />
                <div class="settings__checkbox-container" (click)="config.octodash.fileSorting.attribute = 'size'">
                  <span class="settings__checkbox">
                    <span
                      class="settings__checkbox-checked"
                      *ngIf="config.octodash.fileSorting.attribute === 'size'"
                    ></span>
                  </span>
                  <span class="settings__checkbox-descriptor">Size</span>
                </div>
                <br />
              </td>
              <td>
                <span style="font-size: 2.9vw;">order</span> <br />
                <div class="settings__checkbox-container" (click)="config.octodash.fileSorting.order = 'asc'">
                  <span class="settings__checkbox">
                    <span class="settings__checkbox-checked" *ngIf="config.octodash.fileSorting.order === 'asc'"></span>
                  </span>
                  <span class="settings__checkbox-descriptor">Ascending</span>
                </div>
                <br />
                <div class="settings__checkbox-container" (click)="config.octodash.fileSorting.order = 'dsc'">
                  <span class="settings__checkbox">
                    <span class="settings__checkbox-checked" *ngIf="config.octodash.fileSorting.order === 'dsc'"></span>
                  </span>
                  <span class="settings__checkbox-descriptor">Descending</span>
                </div>
                <br />
              </td>
            </tr>
          </table>
          <span class="settings__heading-2">Custom Actions</span>
          <div *ngFor="let number of [0, 1, 2, 3, 4, 5]">
            <span class="settings__heading-3">{{ customActionsPosition[number] }}</span>
            <label for="action-command" class="settings__input-label">GCode / Action</label>
            <input
              type="string"
              id="action-command"
              class="settings__input"
              name="action-command"
              style="width: 44.94vw; margin-bottom: -2vh;"
              [(ngModel)]="config.octodash.customActions[number].command"
              required
            />
            <table>
              <tr>
                <td>
                  <label for="action-icon" class="settings__input-label">Icon</label>
                  <input
                    type="text"
                    id="action-icon"
                    class="settings__input"
                    name="action-icon"
                    style="width: 14vw;"
                    [(ngModel)]="config.octodash.customActions[number].icon"
                    required
                  />
                </td>
                <td style="padding-left: 3vw;">
                  <label for="action-color" class="settings__input-label">Color</label>
                  <input
                    type="text"
                    id="action-color"
                    class="settings__input"
                    name="action-color"
                    style="width: 14vw;"
                    [(ngModel)]="config.octodash.customActions[number].color"
                    required
                  />
                </td>
                <td>
                  <fa-icon
                    [icon]="['fas', config.octodash.customActions[number].icon]"
                    class="settings__custom-action-icon"
                    [styles]="{ color: config.octodash.customActions[number].color }"
                  ></fa-icon>
                </td>
              </tr>
              <tr>
                <td>
                  <div
                    class="settings__checkbox-container"
                    (click)="
                      config.octodash.customActions[number].confirm = !config.octodash.customActions[number].confirm
                    "
                  >
                    <span class="settings__checkbox">
                      <span
                        class="settings__checkbox-checked"
                        *ngIf="config.octodash.customActions[number].confirm"
                      ></span>
                    </span>
                    <span class="settings__checkbox-descriptor">Confirm</span>
                  </div>
                </td>

                <td style="padding-left: 3vw;" colspan="2">
                  <div
                    class="settings__checkbox-container"
                    (click)="config.octodash.customActions[number].exit = !config.octodash.customActions[number].exit"
                  >
                    <span class="settings__checkbox">
                      <span
                        class="settings__checkbox-checked"
                        *ngIf="config.octodash.customActions[number].exit"
                      ></span>
                    </span>
                    <span class="settings__checkbox-descriptor">Return to Home</span>
                  </div>
                </td>
              </tr>
            </table>
          </div>
          <br />
        </div>
      </div>
      <div class="settings__content settings__content-inactive" #settingsPlugins>
        <span class="settings__heading" (click)="changePage(0, 3, 'backward')">
          <fa-icon [icon]="['fas', 'chevron-left']" class="settings__heading-back"> </fa-icon>plugins
        </span>
        <div class="settings__scroll">
          <span class="settings__heading-2">Display Layer Progress</span>
          <div class="settings__checkbox-container" (click)="config.plugins.displayLayerProgress.enabled = true">
            <span class="settings__checkbox">
              <span
                class="settings__checkbox-checked settings__checkbox-checked-disabled"
                *ngIf="config.plugins.displayLayerProgress.enabled"
              ></span>
            </span>
            <span class="settings__checkbox-descriptor">enabled</span>
          </div>
          <span class="settings__heading-2">Enclosure</span>
          <div
            class="settings__checkbox-container"
            (click)="config.plugins.enclosure.enabled = !config.plugins.enclosure.enabled"
          >
            <span class="settings__checkbox">
              <span class="settings__checkbox-checked" *ngIf="config.plugins.enclosure.enabled"></span>
            </span>
            <span class="settings__checkbox-descriptor">enabled</span>
          </div>
          <label for="enclosure-ambient-id" class="settings__input-label">Ambient Sensor <span>(ID)</span></label>
          <input
            type="number"
            id="enclosure-ambient-id"
            class="settings__input"
            name="enclosure-ambient-id"
            style="width: 44.94vw;"
            [(ngModel)]="config.plugins.enclosure.ambientSensorID"
            required
            [disabled]="!config.plugins.enclosure.enabled"
          />

          <span class="settings__heading-2">Filament Manager</span>
          <div
            class="settings__checkbox-container"
            (click)="config.plugins.filamentManager.enabled = !config.plugins.filamentManager.enabled"
          >
            <span class="settings__checkbox">
              <span class="settings__checkbox-checked" *ngIf="config.plugins.filamentManager.enabled"></span>
            </span>
            <span class="settings__checkbox-descriptor">enabled</span>
          </div>
          <span class="settings__heading-2">Preheat Button</span>
          <div
            class="settings__checkbox-container"
            (click)="config.plugins.preheatButton.enabled = !config.plugins.preheatButton.enabled"
          >
            <span class="settings__checkbox">
              <span class="settings__checkbox-checked" *ngIf="config.plugins.preheatButton.enabled"></span>
            </span>
            <span class="settings__checkbox-descriptor">enabled</span>
          </div>
          <span class="settings__heading-2">Print Time Genius</span>
          <div
            class="settings__checkbox-container"
            (click)="config.plugins.printTimeGenius.enabled = !config.plugins.printTimeGenius.enabled"
          >
            <span class="settings__checkbox">
              <span class="settings__checkbox-checked" *ngIf="config.plugins.printTimeGenius.enabled"></span>
            </span>
            <span class="settings__checkbox-descriptor">enabled</span>
          </div>
          <span class="settings__heading-2">PSU Control</span>
          <div
            class="settings__checkbox-container"
            (click)="config.plugins.psuControl.enabled = !config.plugins.psuControl.enabled"
          >
            <span class="settings__checkbox">
              <span class="settings__checkbox-checked" *ngIf="config.plugins.psuControl.enabled"></span>
            </span>
            <span class="settings__checkbox-descriptor">enabled</span>
          </div>
          <div
            class="settings__checkbox-container"
            [ngClass]="{ 'settings__checkbox-container-disabled': !config.plugins.psuControl.enabled }"
            (click)="
              config.plugins.psuControl.turnOnPSUWhenExitingSleep = !config.plugins.psuControl.turnOnPSUWhenExitingSleep
            "
          >
            <span class="settings__checkbox">
              <span
                class="settings__checkbox-checked"
                [ngClass]="{ 'settings__checkbox-checked-disabled': !config.plugins.psuControl.enabled }"
                *ngIf="config.plugins.psuControl.turnOnPSUWhenExitingSleep"
              ></span>
            </span>
            <span class="settings__checkbox-descriptor">Turn on PSU when exiting sleep</span>
          </div>
        </div>
      </div>
      <div class="settings__content settings__content-inactive" #settingsCredits>
        <span class="settings__heading" (click)="changePage(0, 4, 'backward')">
          <fa-icon [icon]="['fas', 'chevron-left']" class="settings__heading-back"> </fa-icon>credits
        </span>
        <div class="settings__scroll">
          <span class="settings__heading-2">License</span>
          <p class="settings__text">
            Licensed under the Apache 2.0 License. <br />
            http://www.apache.org/licenses/LICENSE-2.0 <br />
            <br />
            Unless required by applicable law or agreed to in writing, software distributed under the License is
            distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
            See the License for the specific language governing permissions and limitations under the License.
          </p>
          <span class="settings__heading-2">Icons</span>
          <ul class="settings__text">
            <li>"bed plate, heated, Plate, Bed icon" from shareicon.net</li>
            <li>"filament, spool, Reel icon" from shareicon.net</li>
            <li>"Extruder, nozzle, head icon" from shareicon.net</li>
            <li>"Invalid Code" by Arthur Shlain from thenounproject.com</li>
            <li>"back" by Dwiky Setiawan from thenounproject.com</li>
            <li>"next" by Dwiky Setiawan from thenounproject.com</li>
            <li>"checkmark" by Muhammad Faizal Rahman Hakim from thenounproject.com</li>
            <li>"delete" by Muhammad Faizal Rahman Hakim from thenounproject.com</li>
            <li>"Sliders" by Danny Lelieveld from thenounproject.com</li>
            <li>"Close" by Danny Lelieveld from thenounproject.com</li>
            <li>"Pause" by Danny Lelieveld from thenounproject.com</li>
            <li>"Play" by Danny Lelieveld from thenounproject.com</li>
            <li>"Thermometer" by Andrejs Kirma from thenounproject.com</li>
            <li>"3d printer filament" by Cono Studio Milano from thenounproject.com</li>
            <li>"Folder" by romzicon from thenounproject.com</li>
            <li>"joystick" by ProSymbols from thenounproject.com</li>
            <li>"Settings" by Karan from thenounproject.com</li>
            <li>"help" by Rainbow Designs from thenounproject.com</li>
            <li>"Upload" by Nikita Tcherednikov from thenounproject.com</li>
            <li>"print" by Delta from thenounproject.com</li>
            <li>"Delete" by Daily icons from thenounproject.com</li>
            <li>"Heat" by Adrien Coquet from thenounproject.com</li>
            <li>"cubes" by artworkbean from thenounproject.com</li>
            <li>"Sort" by Adrien Coquet from thenounproject.com</li>
          </ul>
          <span class="settings__heading-2">Special Thanks</span>
          <p class="settings__text">
            Special Thanks to /u/Slateclean for supplying touchscreens, so development can continue!
          </p>
          <img src="assets/made-in-berlin.png" class="settings__made-in-berlin" />
        </div>
      </div>
    </div>
  </div>
</div>
